<script>
export default {
  name: "LemonBadge",
  props: {
    count: [Number, Boolean],
    overflowCount: {
      type: Number,
      default: 99
    }
  },
  render() {
    return (
      <span class="lemon-badge">
        {this.$slots.default}
        {this.count !== 0 && this.count !== undefined && (
          <span
            class={[
              "lemon-badge__label",
              this.isDot && "lemon-badge__label--dot"
            ]}
          >
            {this.label}
          </span>
        )}
      </span>
    );
  },
  computed: {
    isDot() {
      return this.count === true;
    },
    label() {
      if (this.isDot) return "";
      return this.count > this.overflowCount
        ? `${this.overflowCount}+`
        : this.count;
    }
  },
  methods: {}
};
</script>
<style lang="scss">
</style>
